<template>
  <div>
    <h3>Detail</h3>
    <ul>
        <li v-for="(value,key) in detail" :key="key">{{value}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Detail",
  props:['id'],
  data() {
    return {
      details: [
        { id: 1, title: "title001", content: "detail001" },
        { id: 2, title: "title002", content: "detail002" },
        { id: 3, title: "title003", content: "detail003" },
      ],
      detail:{}
    };
  },
  /* watch:{
      $route:{
          handler(newVal) {
              const id = +newVal.params.id;
              this.detail = this.details.find(detail=>detail.id===id)
              console.log(this.detail);
          },
          immediate:true
      }
  } */
  watch:{
    $route:{
      handler() {
        const id = this.id*1
        this.detail = this.details.find((detail) => detail.id === id);
        console.log(this.detail);
      },
      immediate: true,
    }
  }
};
</script>

<style lang="less" scoped>
</style>
